window.addEventListener('load', function () {


     //配置
     var config = {
        vx: 4,	//小球x轴速度,正为右，负为左
        vy: 4,	//小球y轴速度
        height: 2,	//小球高宽，其实为正方形，所以不宜太大
        width: 2,
        count: 200,		//点个数
        color: "121, 162, 185", 	//点颜色
        stroke: "130,255,255", 		//线条颜色
        dist: 6000, 	//点吸附距离
        e_dist: 20000, 	//鼠标吸附加速距离
        max_conn: 10 	//点到点最大连接数
    }

    //调用
    CanvasParticle(config);

    let data = [
        { "times": 4000, "price": 1200, "unitPrice": "0.3000" },
        { "times": 8000, "price": 2000, "unitPrice": "0.2500" },
        { "times": 40000, "price": 8000, "unitPrice": "0.2000" }
    ]
    let ul = document.querySelector('#ullist')
    let spanprice = document.querySelector('#spanprice')
    let uniprice = document.querySelector('#uniprice')
    console.log(ul);
    data.forEach(function (v) {
        // 创建标签
        let liDom = document.createElement('li')

        // 添加属性
        liDom.classList.add('fl')
        liDom.classList.add('rel')
        // 添加文本
        // liDom.innerHTMl(`${v.times}次`)
        liDom.innerHTML = `${v.times}次`
        // 添加节点到指定盒子
        ul.appendChild(liDom)

        spanprice.innerHTML = data[0].price
        uniprice.innerHTML = data[0].unitPrice
        
        
    })
    let lis = ul.children
    console.log(lis);
    for (let i = 1; i < lis.length; i++) {
        lis[i].addEventListener('click',function (){
            // 干掉其他
            for (let j = 1; j < lis.length; j++) {
                lis[j].classList.remove('active')    
            }
            // 给当前添加属性
            console.log(i);
            lis[i].classList.add('active')
            spanprice.innerHTML = data[i-1].price
            uniprice.innerHTML = data[i-1].unitPrice
        })

        
    }
    





})